<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/singlePage.css" />
		<style type="text/css">
			.mui-input-group {
				text-align: center;
				width: 90%;
				margin: 20px 5%;
			}
			
			.mui-input-row {
				position: relative;
			}
			
			.mui-input-row i.iconfont.icon {
				display: inline-block;
				width: 10%;
				color: #FEB406;
			}
			
			.mui-input-row i.iconfont.check {
				display: none;
				color: #FF0000;
				position: absolute;
				right: 30px;
				top: 12px;
			}
			
			.mui-input-row input {
				display: inline-block;
				width: 80%;
				border-bottom: 1px solid #efeff4;
			}
			
			.mui-input-row input:focus {
				border-color: #FEB406;
			}
			
			.send {
				position: absolute;
				right: 12px;
				width: 100px;
				height: 30px;
				margin: 5px;
				font-size: medium;
				text-align: center;
				vertical-align: middle;
				display: inline;
				line-height: 2px;
				background-color: #FEB406;
			}
			
			.mui-content-padded {
				margin-top: 30px;
			}
			
			.mui-input-group:after,
			.mui-input-group:before,
			.mui-input-row:after {
				display: none;
			}
			
			#next.btn-block,
			#submit.btn-block {
				margin-top: 50px;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="resetpwd" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="main" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">重置密码</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<i class="iconfont icon">&#xe648;</i>
						<input id='telphone' type="number" class="mui-input-clear mui-input" placeholder="手机号码">
						<i class="iconfont check">&#xe656;</i>
					</div>
					<div class="mui-input-row">
						<i class="iconfont icon">&#xe60c;</i>
						<input id='checkNum' type="number" class="mui-input" placeholder="验证码" maxlength="6">
						<button id='checkP' type="button" class="mui-btn-red send">获取验证码</button>
					</div>
				</form>
				<button id='next' class="mui-btn btn-block btn-main">下一步</button>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="sub" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">设置新密码</h1>
			</div>
			<div class="mui-page-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<i class="iconfont icon">&#xe670;</i>
						<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码（至少6个字符）">
					</div>
					<div class="mui-input-row">
						<i class="iconfont icon">&#xe670;</i>
						<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="确认密码">
					</div>
				</form>
				<button id='submit' class="mui-btn btn-block btn-main">提交</button>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.view.js"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#resetpwd').view({
			defaultPage: '#main'
		});

		mui.plusReady(function() {
			var view = viewApi.view;
			//处理view的后退与webview后退
			var oldBack = mui.back;
			mui.back = function() {
				mui('#inputArea').popover('hide');
				plus.nativeUI.confirm("您尚未完成操作，是否返回？", function(e) {
					if(e.index) {
						oldBack();
					}
				}, '', ["取消", "确定"]);
			};

			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				console.log(e.detail.page.id + ' back');
			});

			var passwordBox = document.getElementById('password'); // 密码
			var passwordConfirmBox = document.getElementById('password_confirm'); // 密码确认
			var telphone = document.getElementById('telphone'); // 手机号
			var checkP = document.getElementById("checkP"); // 获取验证码
			var checkNum = document.getElementById("checkNum"); // 验证码
			var nextButton = document.getElementById('next'); // 下一页
			var submitButton = document.getElementById("submit"); // 提交密码
			var interTime = 60; // 验证码计时器
			var timer;
			var checkTel = false; // 手机号是否认证完成
			
			// 获取验证码
			mui('.mui-input-row').on('tap', '#checkP', function() {
				if(/^1[34578]\d{9}$/.test(telphone.value)) {
					Common.ajax({
						url : baseURL + 'checkCode/' + telphone.value + '.json'
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							mui.toast("验证码请求成功");
							//并显示验证码输入倒计时
							interTime = 60;
							checkP.disabled = "disabled";
							timer = setInterval(drawClock, 1000); //设置定时器，让时钟运转起来
							checkTel = true;
						} else if(data.code == 0) {
							mui.toast('验证码请求失败，请稍后重试');
						} else {
							mui.toast('该手机号尚未注册');
						}
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				} else {
					telphone.focus();
					mui.toast('手机号格式不正确');
				}
			})
			
			// 点击下一步校验验证码
			mui('.mui-page-content').on('tap', '#next', function() {
				if(/\d{6}/.test(checkNum.value) && telphone.value && checkTel) {
					viewApi.go("#sub");
				} else {
					mui.toast('您输入的信息不正确，请重新输入');
				}
			})
			
			// 提交信息
			mui('.mui-page-content').on('tap', '#submit', function() {
				if(passwordBox.value.length >= 6 && passwordConfirmBox.value.length >= 6) {
					if(passwordBox.value == passwordConfirmBox.value) {
						var url = baseURL + 'user/forgetPassword/' + telphone.value + '/' + checkNum.value + '/' + passwordBox.value + '.json';
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							switch (data.code){
								case '1':
									mui.toast('密码重置成功，请使用新密码登录');
									oldBack();
									break;
								case '0':
									mui.toast('操作失败，请稍后重试');
									break;
								case '-1':
									mui.toast('该手机号尚未注册');
									break;
								case '-2':
									mui.toast('验证码不正确，请重新输入');
									viewApi.back();
									break;
								default:
									break;
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('两次输入的密码不一致');
					}
				} else {
					mui.toast('您输入的信息不正确，请重新输入');
				}
			})
			
			// 验证码计时器
			function drawClock() {
				if(interTime == 0) {
					clearInterval(timer);
					checkP.disabled = "";
					checkP.innerHTML = "获取验证码";
					timeout = true;
				} else {
					interTime--;
					checkP.innerHTML = interTime + "秒";
				}
			}
		})
	</script>

</html>